function Tab(mode) {
  var modeList = ['fade', 'slide'];
  this.mode = modeList.includes(mode) ? mode : 'fade';
  this.curIndex = 0;

  // 在页面中获取需要操作的 dom 元素
  this.oPageContainer = $('.container');
  this.oPageTab = $('.c-tab');
  this.oPageWrapper = $('.p-wrapper');
  this.oPageItems = $('.p-item');

  this.oPageMode = $('#c-mode');
  this.oPageBtn = $('#c-button');

  // console.log(this.oPageItems[0]);

  this.init();
}

// 初始化
Tab.prototype.init = function () {
  this.setMode();
  this.initPage();
  this.bindClickEvent();
}

// 绑定点击事件
Tab.prototype.bindClickEvent = function () {
  this.oPageTab.on('click', '.item', $.proxy(this.tabClick, this));
  this.oPageBtn.on('click', '', $.proxy(this.btnClick, this));
}

// 设置页面模式
Tab.prototype.setMode = function () {
  this.oPageMode.html(this.mode);
  this.oPageContainer.removeClass('slide fade').addClass(this.mode);
}

// tab 点击触发处理
Tab.prototype.tabClick = function (event) {
  // 给当前的元素添加 active 类样式，并且移除其兄弟节点的 active 类样式
  var event = event || window.event;
  var tarNode = $(event.target || event.srcElement);
  this.curIndex = tarNode.index();

  if (tarNode[0].className === 'item') {
    tarNode.addClass('active').siblings('.item').removeClass('active');
  }

  // 调用切换页面
  this._changePage();
}

// 按钮触发
Tab.prototype.btnClick = function () {
  this.mode = this.mode == 'fade' ? 'slide' : 'fade';
  this.setMode();
  this.initPage();
}

Tab.prototype._changePage = function () {
  switch (this.mode) {
    case 'fade':
      this._fadePage();
      break;
    case 'slide':
      this._slidePage();
      break;
    default:
      this._fadePage();
      break;
  }
}

Tab.prototype.initPage = function () {
  switch (this.mode) {
    case 'fade':
      this._fadeInitPage();
      break;
    case 'slide':
      this._slideInitPage();
      break;
    default:
      this._fadeInitPage();
      break;
  }
}

// 初始化页面
Tab.prototype._fadeInitPage = function () {
  this.oPageItems.css('display', 'none');
  this.oPageItems.eq(this.curIndex).fadeIn();
  this.oPageWrapper.css('left', 0);
}

Tab.prototype._slideInitPage = function () {
  this.oPageItems.css({
    'display': 'block',
  });
  this.oPageWrapper.css('left', -this.curIndex * 500,);
}

// fade 模式
Tab.prototype._fadePage = function () {
  this.oPageItems.eq(this.curIndex).fadeIn(200).siblings('.p-item').fadeOut(300);
}

// slide 模式
Tab.prototype._slidePage = function () {
  this.oPageWrapper.animate({
    left: (-this.curIndex * 500) + 'px'
  });
}

new Tab('slide');
